<template>
    <div>
        <!-- 表格 -->
        <el-table :data="goodsList" border style="width: 100vw" :row-style="rowStyle" :header-cell-style="tableHeaderColor">
            <el-table-column type="selection" width="55"> </el-table-column>

            <el-table-column prop="goods_id" align="center" label="商品id" width="130">
            </el-table-column>

            <el-table-column label="商品图片" align="center" width="100">
                <template slot-scope="scope">
                    <el-popover placement="top-start" title="" trigger="hover">
                        <!-- 预览时的图片 -->
                        <img :src="scope.row.goods_small_logo" alt="" style="width: 150px; height: 150px" />
                        <!-- 真正的图片 -->
                        <img slot="reference" :src="scope.row.goods_small_logo" style="width: 60px; height: 60px" />
                    </el-popover>
                </template>
            </el-table-column>

            <el-table-column prop="goods_name" align="center" label="标题" width="680">
            </el-table-column>

            <el-table-column prop="goods_price" align="center" label="价格" width="120">
            </el-table-column>

            <el-table-column prop="goods_weight" align="center" label="商品体重/g" width="120">
            </el-table-column>

            <el-table-column prop="goods_kucun" align="center" label="库存" width="120">
            </el-table-column>

            <el-table-column align="center" label="类型" width="120">
                <template slot-scope="scope">
                    <div v-if="scope.row.goods_type == 1">
                        <el-button type="success">时尚女装</el-button>
                    </div>
                    <div v-if="scope.row.goods_type == 2">
                        <el-button type="primary">户外运动</el-button>
                    </div>
                    <div v-if="scope.row.goods_type == 3">
                        <el-button type="danger">箱包配饰</el-button>
                    </div>

                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" align="center" width="200">
                <template slot-scope="scope">
                    <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 删除提示框 -->
        <el-dialog title="警告" :visible.sync="dialogVisible" width="25%">
            <span>是否确认删除该商品id为{{ iid }}?</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="suredelete">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 弹窗组件 -->
        <goodstan ref="tan" title="编辑商品"> </goodstan>
    </div>
</template>

<script>
import goodstan from "../../cpmponent/goodstan.vue";
export default {
    data() {
        return {
            dialogVisible: false,
            iid: ''
        };
    },
    components: {
        goodstan
    },
    props: {
        goodsList: []
    },
    methods: {
        // 删除开始
        handleDelete(index, row) {
            console.log(index, row);
            this.dialogVisible = true;
            this.iid = row.goods_id;
        },
        // 确认删除弹窗进行回调
        async suredelete() {
            let res = await this.$axios.post(this.$IP + "/deletegoodsdetail", {
                goods_id: this.iid,
            })
            this.$message.success('删除成功')
            this.dialogVisible = false
            this.$emit('gengxin')

        },
        // 编辑开始
        handleEdit(index, row) {
            console.log(index, row);
            this.$refs.tan.open(row)
        },
        //设置表格行的样式
        rowStyle({ row, rowIndex }) {
            let styleJson1 = {
                "text-align": "center",
            };
            return styleJson1;
        },
        //设置表头行的样式
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            let styleJson = {
                "text-align": "center",
            };
            return styleJson;
        },
    }
};
</script>

<style></style>
